<template>
  <div class="devicebigscreen" id="devicebigscreen">
    <!-- 头部 -->
    <header>
      <img class="bg" src="@/images/bigscreen/device/head_bg3.png" alt="" srcset="">
      <p class="title">越士全域系统</p>
      <div class="currentTime">
        <div class="left">{{ currentTime.year }}-{{ currentTime.month }}-{{ currentTime.day }} {{ currentTime.hh }}:{{ currentTime.mm }}:{{ currentTime.ss }}</div>
        <div class="center">{{ currentTime.week }}</div>
      </div>
    </header>
    <!-- 左侧 -->
    <div class="container-left">
      <title-com titleName="标题1"></title-com>
      <div class="container-left-zs">
        <liquidfill className="sy" :colorNumber="2" width="80%" height="90%"
          :valueData="deviceZtData.allcount ? deviceZtData.allcount : 0" unit="" type="总数"></liquidfill>
      </div>
      <div class="container-left-top">
        <liquidfill className="dy" :colorNumber="1" width="50%" height="100%"
          :valueData="deviceZtData.online ? deviceZtData.online : 0" unit="" type="在线数"></liquidfill>
        <liquidfill className="wt" :colorNumber="3" width="50%" height="100%"
          :valueData="deviceZtData.offline ? deviceZtData.offline : 0" unit="" type="离线数"></liquidfill>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="container-right">
      <title-com titleName="设备列表"></title-com>
      <div class="group-list-wrapper" @click="clickSeeMore">
        <vue-seamless-scroll v-if="deviceList.length > 0" :data="deviceList" class="table-tbody" :class-option="option">
          <ul class="table-tbody-list">
            <li class="table-tbody-item" :class="{ 'activeSb': item.id == groupId }" v-for="(item, index) in deviceList" :key="item.id">
              <div class="same-flex name" :data-groupId="item.id">{{ item.groupName }}</div>
              <div class="content" v-for="(sitem, sindex) in item.deviceList" :key="sitem.id">
                <!-- 设备信息 -->
                <div class="wrap-flex" :data-deviceId="sitem.id" :data-groupId="item.id">
                  <div class="sbmc" :data-groupId="item.id">{{ sitem.name }}</div>
                  <div class="zt offline" :data-groupId="item.id" :class="{ 'online': sitem.zt == '在线' }"><span class="icon"></span><span class="title">{{ sitem.zt }}</span></div>
                  <!-- <div v-if="sindex == '0'" class="more" :data-index="index">更多<i class="el-icon-arrow-down" :data-index="index"></i></div> -->
                </div>
                <!-- 设备具体参数 -->
                <div class="same-flex border-top" v-for="params in sitem.datas" :key="params.name">
                  <div class="label" :data-groupId="item.id">{{ params.name }}</div>
                  <div class="value" :data-groupId="item.id">{{ params.data }}</div>
                </div>
              </div>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <div class="container-footer">
        <div class="footer-center">
          <el-form :inline="true">
            <el-form-item label="">
              <el-date-picker v-model="rangeTime" class="custom-date-picker-bg" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <div class="submit-button" @click="getDeviceDataList">查询</div>
            </el-form-item>
          </el-form>
          <line-com className="line-chart" width="100%" height="75%" :chartData="chartData"></line-com>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
import AMapLoader from '@amap/amap-jsapi-loader';
import { getDeviceInfo } from "@/api/wrj/deviceInfo";
import { getDeviceZtAndList, getDeviceDataList } from "@/api/devicebigscreen";
import { listGroup } from '@/api/wrj/group';
import { formatDate } from '@/utils';
export default {
  name: "map-view",
  data() {
    return {
      currentTime: {
        year: '',
        month: '',
        day: '',
        week: '',
        hh: '',
        mm: '',
        ss: ''
      },
      queryParams: {
        pageNum: 1,
        pageSize: 99999
      },
      satelliteLayer: null,
      deviceList: [],
      infoWindow: null,
      chartData: {},
      deviceZtData: {
        online: '', // 在线数
        offline: '', // 离线数
        allcount: '', //总数
      },
      rangeTime: [],
      sbid: '1', // 默认设备id
      groupId: '', // 组合id
      seeGroupIndex: '', // 查看组合设备详情
      dayWeek: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      timer: null,
    }
  },
  components: {
    vueSeamlessScroll,
    titleCom: () => import('./components/title.vue'),
    lineCom: () => import('./components/line.vue'),
    liquidfill: () => import('./components/liquidfill.vue')
  },
  computed: {
    option() {
      return {
        step: 0.3,
        limitMoveNum: 5,
        direction: 1,
        autoPlay: false,
        openWatch: true
      };
    },
  },
  created() {
    this.getCurrentTime();
    this.timer = setInterval(() => {
      this.getCurrentTime()
    }, 1000)
  },
  mounted() {
    this.resizeAuto();
    window.addEventListener('resize', this.resizeAuto);
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    this.rangeTime = [formatDate(start), formatDate(new Date().getTime())];
    // console.log(this.rangeTime)
    this.getDeviceZtAndList()
    /* this.$nextTick(()=>{
      this.initAMap();
    }) */
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    // 获取当前时间
    getCurrentTime() {
      let current = new Date();
      this.currentTime.year = current.getFullYear();
      this.currentTime.month = parseInt(current.getMonth() + 1) < 10 ? '0' + parseInt(current.getMonth() + 1) : parseInt(current.getMonth() + 1);
      this.currentTime.day = parseInt(current.getDate()) < 10 ? '0' + parseInt(current.getDate()) : parseInt(current.getDate());
      this.currentTime.week = this.dayWeek[current.getDay()];
      this.currentTime.hh = current.getHours() < 10 ? '0' + current.getHours() : current.getHours();
      this.currentTime.mm = current.getMinutes() < 10 ? '0' + current.getMinutes() : current.getMinutes();
      this.currentTime.ss = current.getSeconds() < 10 ? '0' + current.getSeconds() : current.getSeconds();
    },
    // 点击设备
    seeSlaveInfo(row) {
      this.sbid = row.id;
      this.map.setCenter([row.lng, row.lat]);
      //构建信息窗体中显示的内容
      var info = [];
      info.push("<div class='input-card content-window-card'>")
      // info.push(  "<div><img style=\"float:left;width:67px;height:16px;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
      info.push("<div style=\"padding:7px 0px 0px 0px;\"><span>设备信息</span>");
      info.push("<div>");
      info.push(" <table>");
      info.push("   <tr><td>设备名称</td><td>" + row.name + "</td><td>序列号</td><td>" + row.sn + "</td></tr>")
      info.push("   <tr><td>设备类型</td><td>" + row.type + "</td><td>所属街道</td><td>" + row.deptName + "</td></tr>")
      info.push("</table>");
      info.push("</div>")
      info.push("</div>");

      let infoWindow = new AMap.InfoWindow({
        content: info.join(""), //使用默认信息窗体框样式，显示信息内容
        anchor: 'top-left',
      });
      infoWindow.open(this.map, [row.lng, row.lat]);
    },
    // 获取设备状态级具体参数列表
    getDeviceZtAndList() {
      getDeviceZtAndList().then(res => {
        // console.log(res);
        if (res) {
          this.deviceZtData.online = res.online;
          this.deviceZtData.offline = res.offline;
          this.deviceZtData.allcount = res.allcount;
        }
      })
    },
    // 获取设备图表数据
    getDeviceDataList() {
      if (this.rangeTime.length == 0) {
        this.$message.info('请选择时间')
      } else if (!this.sbid) {
        this.$message.info('请选择设备')
      } else {
        getDeviceDataList({
          sbid: this.sbid,
          sTime: this.rangeTime[0] + ' 00:00:00',
          eTime: this.rangeTime[1] + ' 00:00:00'
        }).then(res => {
          this.chartData = res;
        })
      }
    },
    // 获取获取设备列表
    getDeviceList() {
      listGroup(this.queryParams).then(response => {
        // console.log(response)
        let that = this;
        this.deviceList = response.rows;
        if (this.deviceList.length > 0) {
          this.groupId = this.deviceList[0].id;
          // this.getDeviceDataList();
          this.deviceList.forEach(element => {
            var marker = new AMap.Marker({
              icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
              position: [element.lng, element.lat],
              offset: new AMap.Pixel(-13, -30)
            });
            this.map.add(marker);
            marker.sbid = element.id;
            marker.on('click', that.openWindowInfo);
            // marker.emit('click', {target: marker});

          });
        }
      });
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "ea203d3756bb886bcdd4833c10c332b9",
      };
      AMapLoader.load({
        key: "475db83acfc1af0cbab24fbdaa34072c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.defaultLayer = new AMap.createDefaultLayer()
          this.satelliteLayer = new AMap.TileLayer.Satellite();
          this.map = new AMap.Map("devicebigscreen", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [120.577490, 29.932739], // 初始化地图中心点位置
            // layers: [this.satelliteLayer],
            mapStyle: 'amap://styles/darkblue'
            // mapStyle:'amap://styles/88c7e89e923db11eb30fa27fc5c83868'
          });
          this.getDeviceList();
        })
        .catch((e) => {
          console.log(e);
        });
    },

    // 点击图标打开信息窗体
    openWindowInfo(e) {
      console.log(e.target.sbid)
      let sbid = e.target.sbid
      // 获取设备基本信息和实时数据
      getDeviceInfo(sbid).then(response => {
        console.log(response)
        let that = this;
        let deviceInfo = response.data;
        //构建信息窗体中显示的内容
        var info = [];
        info.push("<div class='input-card content-window-card'>")
        // info.push(  "<div><img style=\"float:left;width:67px;height:16px;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
        info.push("<div style=\"padding:7px 0px 0px 0px;\"><span>设备信息</span>");
        info.push("<div>");
        info.push(" <table>");
        info.push("   <tr><td>设备名称</td><td>" + deviceInfo.name + "</td><td>序列号</td><td>" + deviceInfo.sn + "</td></tr>")
        info.push("   <tr><td>设备类型</td><td>" + deviceInfo.type + "</td><td>所属街道</td><td>" + deviceInfo.deptName + "</td></tr>")
        info.push("</table>");
        info.push("</div>")
        info.push("</div>");

        this.infoWindow = new AMap.InfoWindow({
          content: info.join(""), //使用默认信息窗体框样式，显示信息内容
          anchor: 'top-left',
        });
        this.infoWindow.open(this.map, e.target.getPosition());

      });


    },
    resizeAuto() {
      var clientWidth = document.documentElement.clientWidth;
      var clientHeight = window.screen.height;
      var remRate, fontSize;
      if (window.screen.width % 3840 == 0 && clientHeight % 1080 == 0 && window.frameElement == null) {
        clientWidth = Math.max(window.screen.width, 3840); // 最小宽度
        remRate = clientWidth / 3840.0; // 缩放率
        fontSize = remRate * 100.0; // UI尺寸
      } else {
        clientWidth = Math.max(clientWidth, 1366); // 最小宽度
        remRate = clientWidth / 1920.0; // 缩放率
        fontSize = remRate * 100.0; // UI尺寸
      }
      document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
    },
    clickSeeMore(e) {
      if(e.target.dataset.index) { // 点击详情
        if(e.target.dataset.index == this.seeGroupIndex) {
          e.target.parentElement.parentElement.parentElement.style = '';
          this.seeGroupIndex = '';
        } else {
          e.target.parentElement.parentElement.parentElement.style = "height: fit-content;";
          this.seeGroupIndex = e.target.dataset.index;
        }
      }
      if(e.target.dataset.id) { // 点击设备
        this.sbid = e.target.dataset.id;
        // e.target.parentElement.parentElement.parentElement.style = "background-color: #16b1e08d";
        this.getDeviceDataList();
      }
      if(e.target.dataset.groupId) {
        this.groupId = e.target.dataset.groupId;
      }
    },

  },
  watch: {
    '$route': {
      handler(val, old) {
        // console.log(val)
        if (val.path == '/devicebigscreen') {
          this.resizeAuto();
          window.addEventListener('resize', this.resizeAuto);
        }
      },
      immediate: true,
      deep: true
    }
  },
  destroyed() {
    document.getElementsByTagName('html')[0].style.fontSize = '';
    window.removeEventListener('resize', this.resizeAuto);
    clearInterval(this.timer);
  }

};
</script>

<style lang="scss" scoped>
.devicebigscreen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background: linear-gradient(25deg, #0f2249,#182e5a 20%,#0f2249 40%,#182e5a 60%,#0f2249 80%,#182e5a 100%);
  background: url("~@/images/bigscreen/device/map_bg.png") no-repeat;
  background-size: 100% 100%;

  header {
    position: fixed;
    width: 100%;
    height: 1.05rem;
    top: 0;
    z-index: 9;

    .bg {
      width: 100%;
      height: 100%;
    }

    .title {
      position: absolute;
      left: 1%;
      top: 43%;
      transform: translateY(-50%);
      font-family: shangshouhanshuti;
      font-size: 42px;
      color: #fff;
      z-index: 10;
      margin: 0;
      background-image: linear-gradient(to bottom, #68f3f8d1, #fffffff2 69%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: 2px;
    }
    .currentTime {
      position: absolute;
      right: 0.2rem;
      top: 0.2rem;
      color: #3cd7dc;
      font-size: 0.16rem;
      display: flex;
      align-items: center;
      > div {
        line-height: 1;
      }
      .center {
        margin-left: 0.05rem;
      }
    }
  }

  .container-left {
    position: fixed;
    width: 16%;
    height: 35%;
    top: 1rem;
    right: 0.2rem;
    // border: 1px solid #3486da;
    background: url('~@/images/bigscreen/device/item-bg.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: .25rem;
    z-index: 10;

    .container-left-zs {
      width: 96%;
      height: 50%;
      display: flex;
      justify-content: center;
    }

    .container-left-top {
      width: 96%;
      height: 40%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // padding-top: 0.1rem;
      z-index: 999;
    }
  }

  .container-right {
    position: fixed;
    width: 16%;
    height: 45%;
    top: calc(40% + 1.05rem);
    right: 0.2rem;
    background: url('~@/images/bigscreen/device/item-bg.png') no-repeat;
    background-size: 100% 100%;
    z-index: 10;
    .table-tbody-list {
      width: 100%;
      list-style-type: none;
      margin: 0;
      padding: 0;
      .table-tbody-item {
        line-height: 0.25rem;
        cursor: pointer;
        font-size: 0.18rem;
        border: rgba(12,122,200,0.5) 1px solid;
        background-color: rgba(20,66,125,0.12);
        /* height: 0.85rem; */
        height: fit-content;
        margin-top: 0.12rem;
        overflow: hidden;
        .same-flex {
          padding: 0.02rem 0.08rem;
          display: flex;
          justify-content: space-between;
          font-size: 0.14rem;
          &.border-top {
            border-top: 1px dashed #efe2e245;
          }
        }
        .content {
          .zt {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 0.04rem;
            .title {
              display: block;
            }
          }
          .offline {
            color: rgb(207, 57, 57);

            .icon {
              display: inline-block;
              width: 0.04rem;
              height: 0.04rem;
              border-radius: 50%;
              background-color: rgb(207, 57, 57);
              margin-right: 0.03rem;
            }
          }

          .online {
            color: rgb(151, 213, 58);

            .icon {
              display: inline-block;
              width: 0.04rem;
              height: 0.04rem;
              border-radius: 50%;
              background-color: rgb(151, 213, 58);
              margin-right: 0.03rem;
            }
          }
        }
        .wrap-flex {
          display: flex;
          flex-wrap: wrap;
          color: #2c85d2;
          font-weight: bold;
          font-size: 0.14rem;
          padding: 0rem 0.08rem;
          justify-content: space-between;
          > div {
            flex: 1;
          }
        }
        .name {
          background: url("~@/images/bigscreen/device/group-bg.png") no-repeat;
          background-size: 100% 100%;
          width: fit-content;
          font-size: 0.16rem;
        }
        .more {
          color: #2c85d2;
          text-align: right;
        }
        .see {
          box-shadow: 0 0 5px rgb(92, 212, 245) inset;
          font-size: 0.14rem;
          padding: 0.05rem 0.1rem;
          border-radius: 4px;
          width: 0.6rem;
          text-align: center;
          cursor: pointer
        }
        &.activeSb {
          background-color: #16b1e08d !important;
        }
      }
    }
    .group-list-wrapper {
      width: 100%;
      height: 90%;
      overflow: hidden;
      color: #fff;
      .table-tbody {
        width: 100%;
        height: 100%;
        overflow: hidden;
        color: #fff;
        // margin-top: 0.08rem;
      }
    }
  }

  .container-footer {
    position: fixed;
    width: calc(100% - 0.4rem - 18%);
    height: 30%;
    bottom: calc(15% - 1.05rem);;
    z-index: 10;
    left: 0.2rem;
    font-size: 0.2rem;
    background: url('~@/images/bigscreen/device/item-bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 0.06rem 0.15rem;

    .footer-center {
      /* padding-top: 0.1rem; */
      height: 100%;
      .custom-date-picker-bg {
        background-color: transparent;
        color: #fff;
        border: none;
        border-bottom: 1px solid rgba(48, 82, 174, 1);
        border-radius: 0;
        font-size: 0.14rem;
        height: 0.3rem;
      }

      .submit-button {
        line-height: 0.3rem;
        -webkit-box-shadow: 0 0 5px #5cd4f5 inset;
        box-shadow: 0 0 5px #5cd4f5 inset;
        font-size: 0.14rem;
        padding: 0.02rem 0.4rem;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        color: #fff;
        background: linear-gradient(25deg, #0f2249, #182e5a 20%, #0f2249 40%, #182e5a 60%, #0f2249 80%, #182e5a 100%);
        margin-top: 0.05rem;
      }

      .btn-list {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 0.14rem;

        >div {
          box-shadow: 0 0 5px #00a9ff inset;
          padding: 0.05rem 0.15rem;
          box-sizing: border-box;
          cursor: pointer;
          margin-right: 0.08rem;
        }
      }
    }
  }

  footer {
    position: fixed;
    width: 100%;
    bottom: 2px;
    z-index: 9;

    .bg {
      width: 100%;
      display: block;
    }
  }
}
</style>


<style>
.content-window-card {
  font-size: 0.14rem;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}

.amap-icon img {
  width: 25px;
  height: 34px;
}

.amap-info-outer {
  color: white;
  background-size: 100% 100%;
  background-image: url("../../assets/images/u62-1.png");
  background-color: #5e84c187;

}

.amap-info-sharp {
  border-bottom: 10px solid #6db0de;
}

.footer-center .el-form-item {
  margin-bottom: 8px;
}

.footer-center .el-range-input {
  background-color: transparent;
  color: #fff;
  font-size: 0.14rem;
}

.footer-center .el-range-separator {
  line-height: 0.2rem;
  font-size: 0.14rem;
  color: rgba(48, 82, 174, 1);
}

.footer-center .el-range__icon {
  line-height: 1;
}

.el-message {
  font-size: 0.16rem;
}

</style>